

<script setup lang="ts">
import {defineProps,ref, onMounted ,reactive} from 'vue'
import axios from 'axios'
interface Row{
  id?:string | number,
  describe:string,
  code:string,
  path:string|undefined,
  name?:string,
  style?:string,
  lang?:string,
  table?:string,
  cid?:number,
  pcid?:number,
  html?:string
}
const props = defineProps<{ datas: Row[],table:string }>()
// const props =defineProps<{ src: string ,page:number}>()

const show_toc_index = ref(0)
const show_toc = ref(false)
const show_toc_pdf_name = ref("")
const tocs = reactive([]) as Row[]

function getContent(e:MouseEvent){
   let target = e.target
   //@ts-ignore
   let dataset:DOMStringMap  = target.dataset
   let path = dataset.path
   let pcid = dataset.pcid
   let cid = dataset.cid
   let index = dataset.index
   show_toc_index.value = parseInt(''+index)
   let table = props.table
   let enc_path = encodeURIComponent(''+path);
   axios.get('/Search/toc?path='+enc_path+'&cid='+cid+'&pcid='+pcid+'&table='+table).then(function (response) {
     console.log(response);
     tocs.splice(0,tocs.length)
     tocs.splice(0,0, ... response.data.data)
     let paths = path?.split('/')
     if(paths){
        let pdf_name = paths[paths?.length -1]
        show_toc_pdf_name.value = pdf_name
     }
     show_toc.value = true
  }).catch(function (error) {
    console.log(error);
  });
   console.log(dataset)
}

function appendPage(path:string,page2:number,index2:number,callback:any = false){
   let table = props.table
   let enc_path = encodeURIComponent(''+path);
   axios.get('/Search/page?path='+enc_path+'&page='+page2+'&table='+table).then(function (response) {
     let data = response.data.data
     if(index2>=0){
        props.datas.splice(index2,0,...data)
     }else{
        for(var i in data){let page = data[i];  props.datas.push(page)}
     }
     if(callback && typeof callback == 'function'){callback()}
   }).catch(function (error) {
     console.log(error);
   });
}

function getPrev(e:MouseEvent){
   let target = e.target
   //@ts-ignore
   let dataset:DOMStringMap  = target.dataset
   let path = dataset.path
   let page = dataset.page
   let index = dataset.index
   if(page && path && index){
       let page2 = parseInt(page)-1
       let index2 = parseInt(index)
       appendPage(path,page2,index2)
   }
}
function getNext(e:MouseEvent){
   let target = e.target
   //@ts-ignore
   let dataset:DOMStringMap  = target.dataset
   let path = dataset.path
   let page = dataset.page
   let index = dataset.index
   if(page && path && index){
       let page2 = parseInt(page)+1
       let index2 = parseInt(index)+1
       appendPage(path,page2,index2)
   }
}
function getPage(e:MouseEvent){
   let target = e.target
   //@ts-ignore
   let dataset:DOMStringMap  = target.dataset
   let index = dataset.index
   let row = tocs[parseInt(''+index)]
   let page = row.code
   let path = row.path
   row.style="color:orange;"
   if(page && path && index){
       let page2 = parseInt(page)
       let index2 = parseInt(''+show_toc_index.value)
       appendPage(path,page2,index2,function(){
          row.style="color:brown;"
       })
   }
}
function deletePage(e:MouseEvent){
   let target = e.target
   //@ts-ignore
   let dataset:DOMStringMap  = target.dataset
   let index = dataset.index
   let index2 = parseInt(''+index)
   props.datas.splice(index2,1)

}

function clickPng(){
   console.log(arguments)
}

onMounted(()=>{
  // pdf_fetch()
})

</script>

<template>
  <div class="pdf" v-for="(row,index) in datas" >
    <h4 :data-path="row.path" @click="getContent($event)" :data-index="index"
        :data-id="row.id"    :data-describe="row.describe"
        :data-cid="row.cid"  :data-pcid="row.pcid" v-if="row.describe && row.describe.length > 0"
        >{{row.describe}} </h4>
    <div class="page-image" @click="clickPng" v-html="row.html"></div>
    <div class="tool-bar">
        <div class="bar" :data-path="row.path" :data-index="index" @click="getPrev($event)" :data-page="row.code">prev</div>
        <div class="bar red" :data-index="index" @click="deletePage($event)" >delete</div>
        <div class="bar" :data-path="row.path" :data-index="index" @click="getNext($event)" :data-page="row.code">next</div>
    </div>
  </div>

  <van-dialog v-model:show="show_toc" title="相关内容" show-cancel-button>
      <div class="toc-container">
          <div class="pdf-name">{{show_toc_pdf_name}}</div>
          <div class="pdf-toc" v-for="(row,index) in tocs">
             <p @click="getPage($event)" :style="row.style" :data-index="index">{{row.describe}}</p>
          </div>
      </div>
  </van-dialog>

</template>

<style scoped>
.pdf-name{
   color:#51bd1c;
   overflow: scroll;
}
.read-the-docs {
  color: #888;
}
.red{
  color:red;
}
.pdf-toc{
  text-align: left;
  padding-left: 10px;
}
.toc-container{
    max-height: 60vh;
    overflow: scroll;
}
.page-image img{
  width:100%;
}
.tool-bar{
  display: flex;
  justify-content: space-around;
  font-size: 0.8em;
}
</style>
